<template>
	<view class="container">
		<Back />
		<view class="header"></view>
		<text class="header-title">{{ typeMap[type].title }}</text>
		<view class="search fonts">
			<u-search
				placeholder="搜索你想要的内容"
				@search="search"
				@custom="search"
				@clear="clear"
				:focus="true"
				v-model="keyword"
				bg-color="white"
				height="80"
				:show-action="true"
				action-text="搜索"
				:animation="true"
			></u-search>
		</view>
		<view class="column-container">
			<view v-for="(item, index) in searchList.picbooks" :key="index">
				<view class="column-long fonts " @tap="toPicbook(item)" hover-class="touch" hover-start-time="0" hover-stay-time="300">
					<view class="image"><ImageLoad :src="item.coverUrl" /></view>
					<view class="content">{{ item.title }}</view>
				</view>
			</view>
		</view>
		<view class="column-container">
			<view v-for="(item, index) in searchList.courses" :key="index">
				<view class="column-long fonts " @tap="toCourse(item)" hover-class="touch" hover-start-time="0" hover-stay-time="300">
					<view class="image"><ImageLoad :src="item.coverUrl" /></view>
					<view class="content">{{ item.name }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			keyword: '',
			type: 'all',
			typeMap: {
				all: {
					title: '搜索更多',
					url: 'search'
				},
				picbook: {
					title: '搜索绘本',
					url: 'searchPicbook'
				},
				course: {
					title: '搜索课程',
					url: 'searchCourse'
				}
			},
			searchList: {
				picbooks: [],
				courses: []
			},
			recommendable: false
		}
	},
	onShareAppMessage() {
		return {
			title: '孩子的认知优势，决定孩子的未来。赶紧测一测吧！',
			path: '/pages/topic/topic',
			imageUrl: ''
		}
	},
	onLoad(option) {
		this.type = option.type
		this.recommendable = option.recommendable === 'true'
		this.typeMap.course.title = this.recommendable ? '搜索智慧课程' : '搜索亲子社交'
	},
	methods: {
		search: async function(value) {
			if (!value) return
			const [data, err] = await this.awaitWarp(
				this.$post(this.api[this.typeMap[this.type].url], { deviceUuid: this.deviceUuid, key: value, recommendable: this.recommendable })
			)
			this.searchList = data
		},
		clear: function() {
			this.keyword = ''
		},
		toPicbook: async function(item) {
			uni.showLoading({
				title: '正在加载',
				mask: true
			})
			const [data, err] = await this.awaitWarp(this.$post(this.api.loadPicbookData, { picbookId: item.id }))
			uni.hideLoading()
			if (err) {
				uni.showToast({
					title: '网络异常',
					icon: 'none',
					duration: 2000
				})
				return
			}
			this.$Router.push({ name: 'picbook', query: { item: JSON.stringify(data.picbook) } })
		},
		toCourse: function(item) {
			this.$Router.push({ name: 'courseDetail', query: { item: JSON.stringify(item) } })
		}
	}
}
</script>

<style scoped lang="stylus">
.container
	width 100vw
	height auto
	min-height 100vh
	display flex
	flex-direction column
	background #FFFDF7
	padding-bottom 60rpx
	.header
		width 750rpx
		height 320rpx
		background url('http://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/Static-library/yingxiao/homeTop.png') 0 0 / 100% 100%
		position absolute
	.header-title
		color white
		font-size 55rpx
		width fit-content
		font-weight 600
		margin 10vh 0 0 40rpx
		text-shadow 2rpx 2rpx 2rpx #EFBC34
		z-index 1
	.search
		z-index 1
		width 670rpx
		margin 30rpx auto
		filter drop-shadow(2rpx 2rpx 5rpx #c4c4c4)
	.column-container
		width 670rpx
		height auto
		margin 0 auto
		display flex
		flex-wrap wrap
		justify-content space-between
		.column-long
			width 670rpx
			height 400rpx
			border-radius 30rpx
			overflow hidden
			transform translate3d(0, 0, 0)
			box-shadow 0 0 10rpx #FFEEC8
			transition all 0.3s
			font-size 35rpx
			position relative
			margin 20rpx 0
			.image
				height 320rpx
			.content
				width 100%
				height 80rpx
				display flex
				align-items center
				justify-content center
				color #7B2300
</style>
